"use client"

import type React from "react"

interface HeaderProps {
  title?: string
  showBack?: boolean
  onBack?: () => void
  rightContent?: React.ReactNode
}

export default function Header({ title, showBack = false, onBack, rightContent }: HeaderProps) {
  return (
    <header className="sticky top-0 z-50 bg-white border-b border-gray-200 safe-area-top">
      <div className="flex items-center justify-between h-12 px-4">
        <div className="flex items-center">
          {showBack && (
            <button onClick={onBack} className="mr-2 p-1 -ml-1 text-gray-600 hover:text-gray-900">
              {/* 返回图标 */}
            </button>
          )}
          {title && <h1 className="text-lg font-medium text-gray-900 truncate">{title}</h1>}
        </div>
        {rightContent && <div className="flex items-center">{rightContent}</div>}
      </div>
    </header>
  )
}
